<template>
  <ele-page class="workplace-page">
    <profile-card :roleKey="roleKey"/>
    <admin-module v-if="roleKey === 'admin' || roleKey === 'regularAdmin'" :roleKey="roleKey">
    </admin-module>
    <counsellor-module v-if="roleKey === 'counsellor'" :roleKey="roleKey">

    </counsellor-module>
  </ele-page>
</template>

<script setup>
import {ref, computed, onMounted, onBeforeUnmount} from 'vue';
import {selectLoginUserMaxRoleKey} from "@/utils/user-max-role-key.js";


import SortableJs from 'sortablejs';
import {ElMessageBox} from 'element-plus';
import {EleMessage} from 'ele-admin-plus';
import {PlusCircleOutlined, UndoOutlined} from '@/components/icons';
import ProfileCard from './components/profile-card.vue';
import LinkCard from './components/link-card.vue';
import ActivitiesCard from './components/activities-card.vue';
import TaskCard from './components/task-card.vue';
import GoalCard from './components/goal-card.vue';
import ProjectCard from './components/project-card.vue';
import UserList from './components/user-list.vue';
import AdminModule from "./components/admin-module.vue";
import CounsellorModule from "./components/counsellor-module.vue";

defineOptions({
  name: 'Index',
  components: {
    ActivitiesCard,
    TaskCard,
    GoalCard,
    ProjectCard,
    UserList
  }
});

const CACHE_KEY = 'workplace-layout';

/** 默认布局 */
const DEFAULT = [
  {
    name: 'activities-card',
    title: '最新动态',
    md: 8,
    sm: 24,
    xs: 24
  },
  {
    name: 'task-card',
    title: '我的任务',
    md: 8,
    sm: 24,
    xs: 24
  },
  {
    name: 'goal-card',
    title: '本月目标',
    md: 8,
    sm: 24,
    xs: 24
  },
  {
    name: 'project-card',
    title: '项目进度',
    md: 16,
    sm: 24,
    xs: 24
  },
  {
    name: 'user-list',
    title: '小组成员',
    md: 8,
    sm: 24,
    xs: 24
  }
];

/** 获取缓存的数据 */
const getCacheData = () => {
  const str = localStorage.getItem(CACHE_KEY);
  try {
    return str ? JSON.parse(str) : null;
  } catch (e) {
    return null;
  }
};

/** 卡片数据 */
const data = ref([...(getCacheData() ?? DEFAULT)]);

/** 弹窗是否打开 */
const visible = ref(false);

/** 快捷方式卡片 */
const linkCardRef = ref(null);

/** 容器 */
const wrapRef = ref(null);

/** 拖拽排序实例 */
let sortableIns = null;

/** 未添加的数据 */
const notAddedData = computed(() => {
  return DEFAULT.filter((d) => !data.value.some((t) => t.name === d.name));
});

/** 添加 */
const add = () => {
  visible.value = true;
};

/** 重置布局 */
const reset = () => {
  data.value = [...DEFAULT];
  cacheData();
  linkCardRef.value?.reset?.();
  EleMessage.success({message: '已重置', plain: true});
};

/** 缓存布局 */
const cacheData = () => {
  localStorage.setItem(CACHE_KEY, JSON.stringify(data.value));
};

/** 编辑卡片 */
const handleCommand = (command, index) => {
  switch (command) {
    case 'refresh': // 刷新
      EleMessage.info({message: '点击了刷新', plain: true});
      break;
    case 'edit': // 编辑
      EleMessage.info({message: '点击了编辑', plain: true});
      break;
    case 'remove': // 删除
      ElMessageBox.confirm(
        `确定要删除“${data.value[index].title}”卡片吗?`,
        '系统提示',
        {type: 'warning', draggable: true}
      )
        .then(() => {
          data.value = data.value.filter((_d, i) => i !== index);
          cacheData();
        })
        .catch(() => {
        });
      break;
  }
};

/** 添加视图 */
const addView = (item) => {
  data.value.push(item);
  cacheData();
  EleMessage.success({message: '已添加', plain: true});
};


const roleKey = ref("");
onMounted(() => {
  roleKey.value = selectLoginUserMaxRoleKey();
});

onBeforeUnmount(() => {
});


</script>

<style lang="scss" scoped>
.workplace-page {
  :deep(.ele-card-header) {
    user-select: none;
    cursor: move;
  }

  :deep(.el-col) {
    &.sortable-chosen > .ele-card {
      box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.2);
    }

    &.sortable-ghost {
      opacity: 0;
    }

    &.sortable-fallback {
      opacity: 1 !important;
    }
  }
}

/* 底部按钮 */
.workplace-bottom {
  display: flex;
  align-items: center;

  .workplace-button {
    flex: 1;
    padding: 10px 0;
    transition: background-color 0.2s;

    &:hover {
      background: hsla(0, 0%, 60%, 0.05);
    }

    :deep(.el-icon) {
      font-size: 15px;
      margin: -1px 6px 0 0;
    }
  }
}
</style>
